<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="编号"
          style="width: 100px"
          class="filter-item"
        />
        <el-input
          v-model="filter.name"
          placeholder="名称"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-input
          v-model="filter.studentName"
          placeholder="学生姓名"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-input
          v-model="filter.company"
          placeholder="实习单位"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
        />
        <el-button type="primary" style="margin-left: 15px">搜索</el-button>
        <el-button style="margin-left: 10px">重置</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="start_time" label="开始时间" width="120"/>
        <el-table-column prop="end_time" label="结束时间" width="120"/>
        <el-table-column prop="studentId" label="学生学号" width="120" align="center"/>
        <el-table-column prop="studentName" label="学生姓名" width="120"/>
        <el-table-column prop="company" label="实习单位名称" width="150"/>
        <el-table-column prop="companyInfo" label="实习单位简介" width="150">
          <template slot-scope="scope">{{ scope.row.companyInfo || '-' }}</template>
        </el-table-column>
        <el-table-column prop="weeklyScore" label="周报成绩" width="100" align="center"/>
        <el-table-column prop="summaryScore" label="总结成绩" width="100" align="center"/>
        <el-table-column prop="totalScore" label="总成绩" width="100" align="center"/>
        <el-table-column prop="finalScore" label="最终成绩" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.finalScore || '-' }}</template>
        </el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="pagination-info">
        第 1 到 2 条，共 2 条记录。
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        id: '',
        name: '',
        studentName: '',
        company: ''
      },
      tableData: [
        {
          id: 3,
          name: '顶岗实习',
          start_time: '2022-01-02',
          end_time: '2023-02-28',
          studentId: '1',
          studentName: '沿停',
          company: '华为',
          companyInfo: '无',
          weeklyScore: '21',
          summaryScore: '100',
          totalScore: '68.40',
          finalScore: '无'
        },
        {
          id: 5,
          name: '顶岗实习',
          start_time: '2022-01-02',
          end_time: '2023-02-28',
          studentId: '48',
          studentName: '王旭',
          company: '华为',
          companyInfo: '无',
          weeklyScore: '0',
          summaryScore: '0.00',
          totalScore: '无',
          finalScore: '无'
        }
      ]
    }
  }
}
</script>

<style scoped>
.internship-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-item {
  margin-left: 10px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}

.el-table .cell {
  white-space: nowrap;
}
</style>